<template>
    <div class="charts" ref="charts"></div>
</template>

<script>
import * as echarts from 'echarts'
export  default {
    name:'lineChart',
    mounted(){
       let  lineCharts = echarts.init(this.$refs.charts);
       lineCharts.setOption({
           xAxis:{
               show:false,
               type:'category'
           },
           yAxis:{
               show:false,
           },
           //系列
           series:[
               {
                   type:'line',
                   data:[10,20,30,66,12,36,24,100],
                   smooth: true,
                   itemStyle:{
                       opacity:0,
                   },
                   lineStyle:{
                       color:"purple",
                   },
                //    areaStyle:{
                //        color:'purple'
                //    },
                   areaStyle: {
               color: {
               type: "linear",
               x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "purple", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
               }
           ],
           //布局
           grid:{
               left: 0,
               top: 0,
               right: 0,
               bottom: 0
           }
       })
    }
}
</script>

<style>
.charts{
    width:100%;
    height:100%;
}
</style>